<template>
	<div class="sidebar">
		<draggable class="icon iconfont" :list="sidebarList" 
		:tag="sortOptions.tag" 
		:handle="sortOptions.handle" 
		:animation="sortOptions.animation" @update="dragEnd">
			<li :class="{active: active == bar.id}"
			v-for="(bar, index) in sidebarList" :key="index"
			v-if="bar.showflag == 2"
			@click="clickMenu(bar.link, bar.router, bar.id, bar.appInfoId)">
				<span :class="'icon iconfont ' + bar.icon"></span>
				<div class="menu">
					<div>{{bar.name}}</div>
					<tag color="error" class="tag_small" v-if="bar.flag">{{bar.flag}}</tag>
				</div>
				<span class="icon iconfont icon-draggable draggable"></span>
			</li>
		</draggable>
	</div>
</template>

<script>
import draggable from 'vuedraggable'
import {getNavbarByMenuList} from "static/js/common.js"
import {mapMutations} from 'vuex'
import {mapGetters} from 'vuex'
import {appinfoid, domain} from '@/api';

export default {
	inject: ['reload'],
	data(){
		return {
			/*默认高亮*/
			active: 0,
			/*后台取出，需要添加的新路由*/
			routers: [],
			/*拖拽插件参数*/
			sortOptions: {
				tag:'ul',//拖动句柄
				handle:'.draggable',//拖动句柄
				animation: 80,//拖拽排序时，动画的多度时长
			},
			sidebarList: [
			// 	{
			// 		"id": 1,
			// 		"name": "我的面板",
			//		"appInfoId": 0,,
			// 		"icon": "icon-panel",
			// 		"link": "#",
			// 		"router": '',
			// 		"flag": '',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 2,
			// 		"name": "系统设置中心",
			//		"appInfoId": 0,
			// 		"icon": "icon-system-set",
			// 		"link": "#",
			// 		"router": '',
			// 		"flag": '',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 3,
			// 		"name": "微信公众号",
			//		"appInfoId": 0,",
			// 		"icon": "icon-wechat-public",
			// 		"link": "https://mp.weixin.qq.com/",
			// 		"router": '',
			// 		"flag": 'new',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 4,
			// 		"name": "微信小程序",
			//		"appInfoId": 0,",
			// 		"icon": "icon-wechat-pro",
			// 		"link": "https://mp.weixin.qq.com/",
			// 		"router": '',
			// 		"flag": '',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 5,
			// 		"name": "支付中心",
			//		"appInfoId": 0,,
			// 		"icon": "icon-pay-center",
			// 		"link": "https://mp.weixin.qq.com/",
			// 		"router": '',
			// 		"flag": '',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 6,
			// 		"name": "短信通道",
			//		"appInfoId": 0,,
			// 		"icon": "icon-message",
			// 		"link": "https://mp.weixin.qq.com/",
			// 		"router": '',
			// 		"flag": '',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 7,
			// 		"name": "商城",
			//		"appInfoId": 0,			
			// 		"icon": "icon-shop",
			// 		"link": "https://www.taobao.com/",
			// 		"router": '',
			// 		"flag": 'HOT',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 8,
			// 		"name": "酒店管理",
			//		"appInfoId": 0,,
			// 		"icon": "icon-hotel",
			// 		"link": "https://www.taobao.com/",
			// 		"router": '',
			// 		"flag": 'HOT',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 9,
			// 		"name": "CMS",
			//		"appInfoId": 0,
			// 		"icon": "icon-cms",
			// 		"link": "https://baike.baidu.com/item/CMS/315935",
			// 		"router": '',
			// 		"flag": '',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 10,
			// 		"name": "ERP",
			//		"appInfoId": 0,
			// 		"icon": "icon-erp",
			// 		"link": "#",
			// 		"router": '',
			// 		"flag": '',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 11,
			// 		"name": "应用中心",
			//		"appInfoId": 0,,
			// 		"icon": "icon-app",
			// 		"link": "http://www.yiyefei.com/h5/",
			// 		"router": '',
			// 		"flag": '',
			// 		"showflag": 2,
			// 	},
			// 	{
			// 		"id": 12,
			// 		"name": "开发者",
			//		"appInfoId": 0,
			// 		"icon": "icon-devper",
			// 		"link": "http://www.yiyefei.com/h5/",
			// 		"router": '',
			// 		"flag": '',
			// 		"showflag": 2,
			// 	}
			]
		}
	},
	components: {
		draggable,
	},
	created: function() {
		/*记录跳转到最近打开的实例 方便再次登录的时候，直接调转到此处*/
		this.$localstorage.set('lastUrl', window.location.hash)//保存最后点击的应用，为了保存上次的的应用

		/*先查看VUEX是否含有菜单数据，如果有的话，就不需要到后台获取了*/
		if(this.allMenuList.length == 0){
			/*获取所有菜单数据*/
			this.getMenuList()
		}else{
			this.sidebarList = JSON.parse(JSON.stringify(this.sidebar))
			this.currMenu()//显示当前菜单
		}
	},
	methods: {
		/*获取菜单*/
		getMenuList: function(){
			/*下面6行代码，如果是外部 开发的程序，需要注释掉，写固定的app_info_id就行 在su_ac_app_info表中查询app_info_id*/
			let app_info_id = 0
			for(let k in appinfoid){
				if(window.location.hash.indexOf('/' + k + '/') != -1){//当前域名包含 key 的话，说明是取对应的数据
					app_info_id = appinfoid[k];
				}
			}

			this.$baseURL(domain.ac)
			this.$get(this.$api.menuList, {
				'type': 'ele',
				'app_info_id': app_info_id,
				'app': 1
			}).then(res => {
				// console.log(res);
				// if(res.data.code == 10007){//后台提示需要登录
				// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
				// 	this.reload();
				// }
				if(res.data.code === 0){
					this.setAllMenuList(res.data.data)
					let uinfo = JSON.parse(this.$localstorage.get('uinfo'))//取出登录数据 为了判断是否是
					// console.log(uinfo, 999999)
					Object.keys(this.allMenuList).forEach((k) => {
						/*注释原因： 后台判断了，不需要前端判断显示了*/
						// if(this.allMenuList[k].id > 1 || (uinfo.identity < 2 )){
						// //当菜单ID大于1（说明不是开发者菜单） 或 身份是开发者或平台管理者
						// //这些是数字需要跟数据库配对，写死的
						// 	if(!(this.allMenuList[k].id == 112 && uinfo.dealers != 1 && uinfo.comid != '00000000')){
							//如果（是我的客户菜单 且 是普通企业的话）取反 则显示 我的企业ID需要在数据库匹配
								let router = (this.allMenuList[k].m?this.allMenuList[k].m+'/':'') + 
											 (this.allMenuList[k].c?this.allMenuList[k].c+'/':'') + 
											 (this.allMenuList[k].a?this.allMenuList[k].a:'')
								let data = {
									"id": this.allMenuList[k].id,
									"name": this.allMenuList[k].label.name,
									"appInfoId": this.allMenuList[k].app_info_id,
									"icon": 'icon-' + this.allMenuList[k].icon,
									"link": this.allMenuList[k].link,
									"router": router,
									"flag": this.allMenuList[k].flag,
									"showflag": this.allMenuList[k].showflag
								}
								/*追加侧边栏导航数据*/
								this.setSidebar(data);
								this.sidebarList.push(data)//用本组件的数据，而不用vuex数据，是因为拖动的时候，会报错
						// 	}
						// }
					})
					this.setDynamicRouter(this.allMenuList)
					this.$router.addRoutes(this.routers)
					this.currMenu()//显示当前菜单
					// this.$router.addRoutes(this.dynamicRouter)
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*拖拽完毕，有排序变化才会触发*/
		dragEnd: function(){
			console.log("拖拽完毕")
		},
		/*点击菜单*/
		clickMenu: function(link, router, id, appInfoId){
			this.$localstorage.remove('navbarBack');//删除navbarBack
			this.currMenu(id, appInfoId);
			window.open(link, '_self');
			/*注释原因：CMS等应用也是一样的前端域名，导致菜单不获取，必须刷新下，所以干脆都刷新了*/
			// if(link.indexOf(window.location.origin) != -1){//包含的话，说明跳转的域名和当前域名是一样的
			// 	location.reload();
			// }
			location.reload();
		},
		/*
		高亮默认菜单，计算Navbar数据，并传递给父组件
		id 	如果点击菜单的话，是有传值的，如果是第一次进此组件，比如刷新页面，就要从localstorage取，如果localstorage没有则取默认ID
		appInfoId 同上
		*/
		currMenu: function(id = '', appInfoId = ''){
			if(id == ''){
				//从localstorage取
				let currMenuID = this.$localstorage.get('currMenuID');
				if(currMenuID){
					id = currMenuID;
				}else{//没有默认选中的菜单，则跳转到console组件
					this.$router.push({ name: 'console'})
				}
			}
			/* 注释原因： 不需要判断当前是哪个应用了*/
			// if(appInfoId == ''){
			// 	var currAppInfoId = this.$localstorage.get('currAppInfoId');
			// 	if(!currAppInfoId){
			// 		currAppInfoId = 0
			// 	}
			// }else{
			// 	var currAppInfoId = appInfoId
			// }
			
			Object.keys(this.allMenuList).forEach((k)=>{
				if(this.allMenuList[k].id == id){
					this.active = this.allMenuList[k].id;
					this.$localstorage.set('currMenuID', this.active);//保存当前菜单的ID
					// this.$localstorage.set('currAppInfoId', currAppInfoId);//保存当前菜单的currAppInfoId 注释原因： 不需要判断当前是哪个应用了
					let children = this.allMenuList[k].children;//Navbar组件的数据
					this.setNavbar({title: this.allMenuList[k].label.name, list: children})//把 navbar数据 存入vuex
				}
			})
			/*
			获取navbar数据，此数据是navbar的二级以上的数据，带返回路由的那种
			给navbar重新赋值
			*/
			let navbarBack = JSON.parse(this.$localstorage.get('navbarBack'));
			if(navbarBack != null){
				let list = getNavbarByMenuList(this.allMenuList, navbarBack.menuID)
				this.setNavbar({title: 'back', list: list, routerName: navbarBack.routerName})//把 navbar数据 存入vuex
			}

			/*设置默认的应用链接  根据appInfoId获取应用的链接, 存入vuex*/
			// this.__setAppLink(currAppInfoId) 注释原因：在api配置文件里加了域，每次加应用都必须在配置文件里加，所以这里不需要判断了
		},
		/*整理出动态路由数据*/
		setDynamicRouter: function(menuList){
			for(let i=0; i<menuList.length; i++){
				/*讲API路由，放到配置参数中，给对接后端接口用*/
				let router = (menuList[i].m?menuList[i].m+'/':'') + 
							 (menuList[i].c?menuList[i].c+'/':'') + 
							 (menuList[i].a?menuList[i].a:'')
				if(menuList[i].apikeyname != '' && router != ''){
					this.$api[menuList[i].apikeyname] = router
				}

				if(menuList[i].vueRouter != null && menuList[i].vueRouter.path != '' && menuList[i].vueRouter.name != '' && menuList[i].vueRouter.component != ''){
					let newRouter = {
						path: menuList[i].vueRouter.path,
						name: menuList[i].vueRouter.name,
						component: (resolve) => require([`@/components/${menuList[i].vueRouter.component}`], resolve)
					};
					let hasRouter = false;//默认没有此路由配置
					if(this.dynamicRouter.length > 0){
						this.dynamicRouter.forEach(item => {
							if(newRouter.name == item.name){
								hasRouter = true;
							}
						})
					}
					if(!hasRouter){
						this.addDynamicRouter(newRouter)
						/*判断是否上级栏目的子路由*/
						if(menuList[i].child_route == true){
							let count = this.routers.length
							if(this.routers[this.routers.length-1].children == undefined){
								this.routers[this.routers.length-1].children = []
							}
							this.routers[this.routers.length-1].children.push(newRouter)
						}else{
							this.routers.push(newRouter)
						}
					}
				}
				if(menuList[i].children.length > 0){
					this.setDynamicRouter(menuList[i].children);//递归
				}
			}
		},
		/*根据app_info_id把应用链接存入vuex，便于下面调用*/
		__setAppLink: function(appInfoId) {
			if(appInfoId == 0){//说明是认证中心
				// console.log(domain.ac, '22')
				this.setAppLink(domain.ac);
				return
			}
			/*取出需要修改的数据*/
			// this.$baseURL(domain.ac)
			this.$get(this.$api.modifyAppinfo, {
				'id': appInfoId
			}).then(res => {
				// if(res.data.code == 10007){//后台提示需要登录
				// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
				// 	this.reload();
				// }
				if(res.data.code == 0){
					if(res.data.data.app_intranet_url != ''){
						this.setAppLink(res.data.data.app_intranet_url)
						this.$baseURL(res.data.data.app_intranet_url)
					}else{
						this.setAppLink(res.data.data.app_outside_url)
						this.$baseURL(res.data.data.app_outside_url)
					}
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		...mapMutations({
			setAllMenuList: 'setAllMenuList',
			addDynamicRouter: 'addDynamicRouter',
			setSidebar: 'setSidebar',
			setNavbar: 'setNavbar',
			setAppLink: 'setAppLink'
		})
	},
	computed: {
		...mapGetters([
			'allMenuList',
			'dynamicRouter',
			'sidebar',
			'navbar'
		])
	}
}
</script>

<style lang="stylus" scoped>
.sidebar
	color: #fff
	font-weight: normal
	ul
		width: 230px
		li
			height: 40px
			line-height: 40px
			font-size: 14px
			display: flex
			align-items: center
			cursor: pointer
			span
				width: 50px
				height: 40px
				display: inline-block
				text-align: center
				font-size: 16px
				color: #b2b4b5
				display: flex
				justify-content: center
				align-items: center
			.menu
				flex: 1
				color: #fff
				display: flex
				align-items: center
				>div
					margin-right: 10px
				.ivu-tag
					margin-left: 10px
			:hover
				color: #4abadb
			span.draggable
				width: 30px
				cursor: move
				opacity: .5
				display: none
			&:hover
				color: #4abadb
				span
					color: #fff
			&:hover .draggable
				display: inline-block
		.active
			color: #fff !important
			background-color: #4abadb
			span
				color: #fff
			.menu
				div
					color: #fff
</style>